import React, { Component } from "react";
import TextFieldGroup from "../../common/TextFiledGroup.jsx";
import TextAreaFieldGroup from "../../common/TextAreafField.jsx";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import {Link} from 'react-router-dom'
import {addEducation} from '../../actions/profileActions'


class AddEducation extends Component {
    constructor(props) {
      super(props);
      this.state = {
        school: '',
        degree: '',
        fieldofstudy: '',
        from: '',
        to: '',
        current: false,
        description: '',
        errors: {},
        disabled: false
      };
      this.onChange = this.onChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
      this.onCheck = this.onCheck.bind(this);
    }
  
    UNSAFE_componentWillReceiveProps(nextProps) {
      if (nextProps.errors) {
        this.setState({
          errors: nextProps.errors
        })
      }
    }
  
    onSubmit(e) {
      e.preventDefault();
      const eduData = {
        school: this.state.school,
        degree: this.state.degree,
        fieldofstudy: this.state.fieldofstudy,
        from: this.state.from,
        to: this.state.to,
        current: this.state.current,
        description: this.state.description
      }
  
      this.props.addEducation(eduData, this.props.history);
    }
  
    onChange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }
  
    onCheck(e) {
      this.setState({
        disabled: !this.state.disabled,
        current: !this.state.current
      })
    }
  
    render() {
  
      const { errors } = this.state;
  
      return (
        <div className="add-Education">
          <div className="container">
            <div className="row">
              <div className="col-md-8 m-auto">
                <Link to="/dashboard" className="btn btn-light">
                  返回
                </Link>
                <h1 className="display-4 text-center">添加教育经历</h1>
                <p className="lead text-center">
                  你所毕业的学校, 参加的培训等
                </p>
                <small className="d-block pb-3">* 为必填项</small>
  
                {/* 表单 */}
                <form onSubmit={this.onSubmit}>
                  <TextFieldGroup
                    placeholder="* 学校"
                    name="school"
                    value={this.state.school}
                    onChange={this.onChange}
                    error={errors.school}
                  />
                  <TextFieldGroup
                    placeholder="* 学历"
                    name="degree"
                    value={this.state.degree}
                    onChange={this.onChange}
                    error={errors.degree}
                  />
                  <TextFieldGroup
                    placeholder="* 专业"
                    name="fieldofstudy"
                    value={this.state.fieldofstudy}
                    onChange={this.onChange}
                    error={errors.fieldofstudy}
                  />
                  <h6>开始时间</h6>
                  <TextFieldGroup
                    name="from"
                    type="date"
                    value={this.state.from}
                    onChange={this.onChange}
                    error={errors.from}
                  />
                  <h6>毕业时间</h6>
                  <TextFieldGroup
                    name="to"
                    type="date"
                    value={this.state.to}
                    onChange={this.onChange}
                    error={errors.to}
                    disabled={this.state.disabled ? 'disabled' : ''}
                  />
                  <div className="form-check mb-4">
                    <input
                      type="checkbox"
                      className="form-check-input"
                      name="current"
                      value={this.state.current}
                      checked={this.state.current}
                      onChange={this.onCheck}
                      id="current"
                    />
                    <label htmlFor="current" className="form-check-label">
                      当前在校
                    </label>
                  </div>
                  <TextAreaFieldGroup
                    placeholder="在校表现"
                    name="description"
                    value={this.state.description}
                    onChange={this.onChange}
                    error={errors.description}
                    info="说说你在学习过程的经历"
                  />
                  <input
                    type="submit"
                    value="提交"
                    className="btn btn-info btn-block mt-4"
                  />
                </form >
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  AddEducation.propTypes = {
    addEducation: PropTypes.func.isRequired,
    profile: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state => ({
    profile: state.profile,
    errors: state.errors
  });
  
  export default connect(mapStateToProps, { addEducation })(withRouter(AddEducation));